<template>
  <div class="first">
    <div class="div">
      <div class="top">
        <div class="btns">
          <h3 @click="addfenlei">新增</h3>
        </div>
      </div>

      <div class="neirong">
        <el-tree
          :data="tableData"
          node-key="names"
          highlight-current
          :props="{label: 'names',children: 'list'}"
          @current-change="handleNodeClick"
          v-loading="threeloading"
        ></el-tree>
      </div>
    </div>

    <div class="xinxi">
      <div class="top">
        <div class="btn">
          <h3 @click="xinxi" :class="xinxishow==true ? 'select':'' ">基本信息</h3>
          <!-- <h3 @click="xinghao" :class="xinghaoshow==true ? 'select':'' ">标准型号</h3> -->
        </div>
      </div>
      <div class="xinxi-list" v-if="xinxishow">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="分类编码">
            <el-input v-model="form.ids" disabled></el-input>
          </el-form-item>
          <el-form-item label="分类名称">
            <el-input v-model="form.names"></el-input>
          </el-form-item>
          <el-form-item class="btn-s">
            <el-button size="small" @click="del">删除</el-button>
            <el-button size="small" type="primary" @click="updateClassify">保存</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-dialog title="删除分类" :visible.sync="delshow" width="40%">
        <div class="product">
          <p>确定删除此项吗？</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="quxiao">取 消</el-button>
          <el-button size="small" type="primary" @click="queding">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="新增分类" :visible.sync="classifyshow" width="30%" :close-on-click-modal="false">
        <el-form ref="add" :model="add" label-width="80px">
          <el-form-item label="分类名称">
            <el-input v-model="add.names"></el-input>
          </el-form-item>
          <el-form-item label="上级分类">
            <el-cascader
              :options="tableData"
              v-model="add.parentId"
              :show-all-levels="false"
              :props="{ checkStrictly: true, value:'ids',label: 'names', children:'list' }"
              clearable></el-cascader>
          </el-form-item>
          <span style="color:#999;font-size: 12px;margin-left:80px">*不选分类默认新增一级分类</span>
          <el-form-item>
            <el-button size="small" @click="classifyshow = false">取消</el-button>
            <el-button size="small" type="primary" @click="saveClass">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- <div class="xinghao" v-if="xinghaoshow">
        <el-table :data="xinghaolist" style="width: 100%">
          <el-table-column prop="name" label="资产名称" width="180"></el-table-column>
          <el-table-column prop="xinghao" label="规格型号" width="180"></el-table-column>
          <el-table-column prop="danwei" label="计量单位"></el-table-column>
          <el-table-column prop="zhi" label="原值"></el-table-column>
        </el-table>
      </div> -->
    </div>
  </div>
</template>

<script>
import { addHaocaiFenlei,updateHaocaiFenlei,selectHaocaiFenlei,deleteHaocaiFenlei } from '@/api/caigou'
export default {
  data() {
    return {
      classifyshow: false,
      delshow: false,
      threeloading: true,   //分类加载
      num: 1,
      form: {},
      id: "",
      add: {},
      xinxishow: true,
      xinghaoshow: false,
      tableData: [],
    };
  },
  mounted(){
    this.getList()
  },
  methods: {
    // 点击分类菜单获取对应商品
    handleNodeClick(data, checked, node) {
      console.log(data)
      this.add.parentId = data.ids
      this.form = {...data}
    },
    addfenlei() {
      console.log("分类");
      this.classifyshow = true;
      console.log(this.classifyshow)
    },
    addquxiao() {
      this.addshow = false;
    },
    // 修改分类
    updateClassify(){
      if(this.form.ids && this.form.names){
        console.log(this.form)
        updateHaocaiFenlei({names: this.form.names,ids: this.form.ids}).then(res => {
          console.log(res)
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.getList()
        })
      }else{
        this.$message({
          message: '请先选择要修改的分类!',
          type: 'warning'
        })
      }
    },
    // 保存分类
    saveClass() {
      console.log(this.add);
      this.addshow = false;
      console.log(this.add.parentId)
      if(typeof this.add.parentId !== 'string'){
        this.add.parentId = this.add.parentId ? this.add.parentId[this.add.parentId.length-1] : 0
      }
      addHaocaiFenlei(this.add).then(res => {
        console.log('新增一级分类',res)
        this.$message({
          message: '新增成功！',
          type: 'success'
        })
        this.classifyshow = false
        this.add = {}
        this.getList()
      })
    },
    handleChange(value) {
      console.log(value);
    },
    xinxi() {
      this.xinxishow = true;
      this.xinghaoshow = false;
    },
    xinghao() {
      this.xinxishow = false;
      this.xinghaoshow = true;
    },
    del() {
      this.delshow = true;
    },
    quxiao() {
      this.delshow = false;
    },
    queding() {
      this.delshow = false;
      console.log("删除");
      console.log(this.form)
      if(this.form.ids && this.form.names){
        console.log(this.form)
        deleteHaocaiFenlei(this.form.ids).then(res => {
          console.log(res)
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          this.form = {}
          this.getList()
        })
      }else{
        this.$message({
          message: '请先选择要删除的分类!',
          type: 'warning'
        })
      }
      
    },
    getList() {
      selectHaocaiFenlei({}).then(res => {
        console.log(res)
        this.tableData = res.data
        this.threeloading = false
      })
    },
  },
};
</script>
<style scoped lang="scss">
/deep/.el-tree-node__content:hover {
  background-color: #18a05e;
  border-radius: 3px;
  color: #fff;
}
/deep/.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #18a05e;
  border-radius: 3px;
  color: #fff;
}
/deep/.el-form-item {
  color: black;
  margin: 15px 0 !important;
}
/deep/.el-dialog__body {
    padding: 5px 20px;
}
/deep/.el-cascader {
    width: 100%;
}
.el-tree {
  position: relative;
  cursor: default;
  background: #fff;
  width: 90%;
  color: #606266;
}
.el-menu-vertical-demo {
  width: 100%;
}
.first {
  margin: 20px;
  padding: 20px 20px 20px 0;
  border-radius: 10px;
  display: flex;
  flex: 1;
  background-color: #fff;
}
.div {
  width: 30%;
  height: 520px;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}
.top {
  background-color: white;
  height: 50px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.btns {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.btns h3 {
  width: 64px;
  height: 32px;
  background: #18a05e;
  // border-radius: 3px;
  color: #fff;
  font-size: 14px;
  line-height: 32px;
  font-weight: 100;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.neirong {
  margin-left: 20px;
  display: flex;
}
.xinxi {
  flex: 1;
  padding-left: 25px;
}
.btn {
  display: flex;
}
.btn h3 {
  margin-right: 10px;
  width: 64px;
  height: 32px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 32px;
  font-weight: 100;
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
}
.select {
  color: #18a05e;
  border-bottom: 1px solid #18a05e;
}
.xinxi-list {
  // border-left: solid 1px silver;
}
</style>